<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>javascript 一个页面多个tab选项卡效果</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script>
        window.onload = function(){
            var main = document.getElementById("tabMain");
            var tab = new Tab(main);
            tab.init();
        }
        function Tab(id){
            this.aLi=id.getElementsByTagName("li");
            this.oDiv=id.getElementsByTagName("div");
        }
        Tab.prototype.init = function(){
            var obj =this;//tab实例化对象
            for(var i=0;i<obj.aLi.length;i++){
                obj.aLi[i].index = i;//给li添加一个索引
                obj.aLi[i].onclick=function(){
                    obj.fnClick(this);//this当前点击的元素li
                }

            }
        }
        Tab.prototype.fnClick=function(aLi){
            //alert(this);  //li
            for (var i =0;i<this.aLi.length;i++)
            {
                this.aLi[i].className = "";
                this.oDiv[i].style.display = "none";
            }
            aLi.className = "active";
            this.oDiv[aLi.index].style.display = "block";
        };
    </script>
    <style>
        *{padding: 0;margin: 0; list-style: none;}
        .tabMenu{width:300px;  margin:50px auto 0 auto;}
        .tabMenu ul{display: block; overflow: hidden;width:300px;height: 40px;background: #eee;}
        .tabMenu ul li{ cursor:pointer;display: block;float: left;width:100px; text-align: center;height: 40px; line-height: 40px;font-size:16px;}
        .tabMenu ul li.active{ background:#f00;color:#fff;}
        .tabMenu .tabSide{display: none;padding:10px; line-height: 20px;white-space:pre-wrap; word-break:break-all;width:278px;border:solid 1px #eee; }
        .tabMenu div.active{ display: block;padding:10px; line-height: 20px;white-space:pre-wrap; word-break:break-all;width:278px;border:solid 1px #eee; }
    </style>
</head>
<body>
<div id="tabMain" class="tabMenu">
    <ul>
        <li class="active">11</li>
        <li>22</li>
        <li>33</li>
    </ul>
    <div class="tabSide active">1111111</div>
    <div class="tabSide">2222222</div>
    <div class="tabSide">33333333</div>
</div>

</body>
</html>